<template>
<el-container v-loading.fullscreen.lock="fullscreenLoading">
  <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" @click="day">日报</el-menu-item>
        <el-menu-item index="2" @click="week">周排行</el-menu-item>
        <el-menu-item index="3" @click="month">月排行</el-menu-item>
        <el-menu-item index="4" @click="zong">总排行</el-menu-item>
        <el-submenu index="5">
          <template slot="title">分类</template>
          <el-menu-item v-for="v in cate" index="6" @click="tolist(v.data.id)">{{v.data.title}}</el-menu-item>
        </el-submenu>
      </el-menu>
  </el-header>
  <el-main>
      <el-row>
        <el-col :span="3" v-for="rb in ribao" v-if="!rb.data.text" >
          <el-card :body-style="{ padding: '0px' }" >
            <img :src="rb.data.content.data.cover.feed" class="image" @click="tomydetail(rb.data.content.data.webUrl.raw)">
            <div style="padding: 14px;" @click="tomydetail(rb.data.content.data.webUrl.raw)">
              <span>{{rb.data.content.data.title}}</span>
              <div class="bottom clearfix">
                <time class="time">{{rb.data.content.data.author.name}}/{{rb.data.content.data.category}}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  </el-main>
  <el-footer>
     <el-pagination
     background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
       :page-size="10"
       layout="prev, pager, next"
       :total="1000">
     </el-pagination>
  </el-footer>
</el-container>
</template>

<script>
export default {
  name: 'index',
  data() {
         return {
           activeIndex: '1',
           activeIndex2: '1',
           cate:[],
           ribao:[],
           cateid:0,
           type:'1',
           page:1,
           valueDate:'',
            fullscreenLoading: false
         };
       },
       methods: {
        handleSizeChange(val) {
           console.log(`每页 ${val} 条`);
         },
         handleCurrentChange(val) {
           console.log(`当前页: ${val}//`+this.type+'//'+this.cateid);
           var start = (val-1)*10;
           switch(this.type)
           {
            case '6':
              this.fullscreenLoading = true;
              console.log('我是6')
               //分类
               this.$http.get("/api/api/v4/categories/videoList?start="+start+"&num=10&strategy=date&id="+this.cateid+"&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                               console.log(res);
               this.ribao=res.body.itemList;
                  this.fullscreenLoading = false;
               })
              break;
            case '1':
                console.log("日报1")
                var datenum = (val-1)*2;
                this.valueDate = new Date()
                this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() - datenum))
                var timetamp3 = Number(this.valueDate) ;
                var timestamp4 = new Date(timetamp3);//直接用 new Date(时间戳) 格式转化获得当前时间
                //console.log(timestamp4.toLocaleDateString().replace(/\//g, "-") + " 09:00:00");
                var time1 = timestamp4.toLocaleDateString().replace(/\//g, "-") + " 09:00:00"
                var date1 = new Date(time1);
                var okcuo = date1.valueOf()
                console.log(okcuo);
                this.fullscreenLoading = true;
                 //日报
                 this.$http.get("/api/api/v5/index/tab/feed?date="+okcuo+"&num=2&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                                 console.log(res);
                 this.ribao=res.body.itemList;
                    this.fullscreenLoading = false;
                 })
              break;
            case '2':
                  console.log("周排行2")
                  this.fullscreenLoading = true;
                  //周排行
                  this.$http.get("/api/api/v4/rankList/videos?strategy=weekly&start="+start+"&num=10&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                                  console.log(res);
                  this.ribao=res.body.itemList;
                   this.fullscreenLoading = false;
                  })
                break;
            case '3':
                  console.log("月排行3")
                  this.fullscreenLoading = true;
                   //月排行
                   this.$http.get("/api/api/v4/rankList/videos?strategy=monthly&start="+start+"&num=10&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                                   console.log(res);
                   this.ribao=res.body.itemList;
                      this.fullscreenLoading = false;
                   })
                  break;
            case '4':
                console.log("总排行4")
                this.fullscreenLoading = true;
               //总排行
               this.$http.get("/api/api/v4/rankList/videos?strategy=historical&start="+start+"&num=10&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                               console.log(res);
               this.ribao=res.body.itemList;
                  this.fullscreenLoading = false;
               })
                break;
            default:
               console.log("其他")
           }
         },
         handleSelect(key, keyPath) {
           //console.log(key, keyPath);
           console.log(key)
           this.type=key;
           this.page=1;
           console.log(`当前页: ${this.page}//`+this.type+'//'+this.cateid);
         },
         tolist:function(id){
            console.log(id)
            this.cateid = id;
            this.fullscreenLoading = true;
             //分类
             this.$http.get("/api/api/v4/categories/videoList?id="+id+"&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                             console.log(res);
             this.ribao=res.body.itemList;
                this.fullscreenLoading = false;
             })
         },
         tomydetail:function(url){
                     console.log(url)
                     //window.location.href =url
                     window.open(url);
         },
         day:function(){
            this.fullscreenLoading = true;
             //日报
             this.$http.get("/api/api/v5/index/tab/feed?udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                             console.log(res);
             this.ribao=res.body.itemList;
                this.fullscreenLoading = false;
             })
         },
         week:function(){
          this.fullscreenLoading = true;
            //周排行
            this.$http.get("/api/api/v4/rankList/videos?strategy=weekly&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                            console.log(res);
            this.ribao=res.body.itemList;
             this.fullscreenLoading = false;
            })
         },
         month:function(){
              this.fullscreenLoading = true;
             //月排行
             this.$http.get("/api/api/v4/rankList/videos?strategy=monthly&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                             console.log(res);
             this.ribao=res.body.itemList;
                this.fullscreenLoading = false;
             })
          },
          zong:function(){
               this.fullscreenLoading = true;
               //总排行
               this.$http.get("/api/api/v4/rankList/videos?strategy=historical&udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                               console.log(res);
               this.ribao=res.body.itemList;
                  this.fullscreenLoading = false;
               })
            }
       },
       created(){

            //分类列表
            this.$http.get("/api/api/v5/category/list?udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&deviceModel=COL-AL10&size=1080X2190&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28&token=762201bc3a9fcc52").then((res)=>{
                //console.log(res);
                this.cate=res.body.itemList;
            })
            //日报
            this.$http.get("/api/api/v5/index/tab/feed?udid=b922fc10d335438387888dcffe2b943a120c619c&vc=443&vn=4.9.1&size=1080X2190&deviceModel=COL-AL10&first_channel=eyepetizer_zhihuiyun_market&last_channel=eyepetizer_zhihuiyun_market&system_version_code=28").then((res)=>{
                            console.log(res);
            this.ribao=res.body.itemList;
            })
           }
        }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-card {
    min-height: 270px;
}
.el-col-3 {
    width: 276px;
    margin-top: 20px;
    margin-left: 20px;
}
.el-col-offset-2 {
    margin-left:30px;
}
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

   .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
